<template>
  <MyHeader> </MyHeader>
  <div style="margin: 50px;">
      <el-descriptions
          style="margin-bottom: 30px"
              v-for="role in this.roleList"
              :key="role.roleId"
              class="margin-top"
              :title="role.roleName"
              :column="3"
              border
      >
          <template #extra>
              <el-dropdown>
                    <span class="el-dropdown-link">
                        操作
                        <el-icon class="el-icon--right"><arrow-down />
                        </el-icon>
                    </span>
                  <template #dropdown>
                      <el-dropdown-menu >
                          <el-dropdown-item @click="addAuth(role.roleId)">设置权限</el-dropdown-item>
                          <el-dropdown-item @click="delRole(role.roleId)">删除角色</el-dropdown-item>
                      </el-dropdown-menu>
                  </template>
              </el-dropdown>
          </template>
          <div>
              <el-descriptions-item v-for="auth in this.authMap.get(role.roleId)" :key="auth">
                  <template #label>
                      <div class="cell-item">
                          权限
                      </div>
                  </template>
                  {{getAuthName(auth)}}
              </el-descriptions-item>
          </div>
      </el-descriptions>


      <el-dialog v-model="dialogFormVisible" title="修改权限页面">
          <el-form v-model="updateForm">
              <el-form-item label="添加标签" :label-width="140">
                  <el-switch v-model="this.updateForm.a1" />
              </el-form-item>
              <el-form-item label="删除标签" :label-width="140">
                  <el-switch v-model="this.updateForm.a2" />
              </el-form-item>
              <el-form-item label="修改标签" :label-width="140">
                  <el-switch v-model="this.updateForm.a3" />
              </el-form-item>
              <el-form-item label="为图片增加标签" :label-width="140">
                  <el-switch v-model="this.updateForm.a4" />
              </el-form-item>
              <el-form-item label="删除图片" :label-width="140">
                  <el-switch v-model="this.updateForm.a5" />
              </el-form-item>
              <el-form-item label="上传图片" :label-width="140">
                  <el-switch v-model="this.updateForm.a6" />
              </el-form-item>
              <el-form-item label="设置角色权限" :label-width="140">
                  <el-switch v-model="this.updateForm.a7" />
              </el-form-item>
              <el-form-item label="添加角色" :label-width="140">
                  <el-switch v-model="this.updateForm.a8" />
              </el-form-item>
              <el-form-item label="删除角色" :label-width="140">
                  <el-switch v-model="this.updateForm.a9" />
              </el-form-item>
              <el-form-item label="更改用户角色" :label-width="140">
                  <el-switch v-model="this.updateForm.a10" />
              </el-form-item>
              <el-form-item label="更改角色信息" :label-width="140">
                  <el-switch v-model="this.updateForm.a11" />
              </el-form-item>
          </el-form>

          <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="updateConfirm">
                    提交
                  </el-button>
                </span>
          </template>
      </el-dialog>

  </div>
</template>

<script>
import {defineComponent, inject} from 'vue'
import MyHeader from "@/components/MyHeader.vue";
import axios from "axios";
import $cookies from "vue-cookie";

export default defineComponent({
    name: "RoleAuth",
    components: {MyHeader},
    data(){
        return{
            myBaseURL: inject('$baseURL'),
            myVueURL: inject('$vueURL'),
            roleList: Array(),
            authsInfo: [],
            authMap: {

            },
            dialogFormVisible: false,
            updateForm:{
              a1: false,
              a2: false,
              a3: false,
              a4: false,
              a5: false,
              a6: false,
              a7: false,
              a8: false,
              a9: false,
              a10: false,
              a11: false,
            },
            setRoleId: -1,
            setMapResp: 1
        }
    },
    methods:{
      addAuth: function (roleId) {
          console.log(roleId)
          this.setRoleId = roleId
          this.dialogFormVisible = true
      },
      delRole: function (id) {
          console.log(id)
      },
      getAuthsInfo: function (){
          const token = $cookies.get('token')
          axios({
              method: 'get',
              url: '/auth/get/info',
              baseURL: this.myBaseURL,
              headers: {
                  "Content-Type": "multipart/form-data",
                  "User-Token": token,
              }
          }).then(res => {
              //console.log(res.data)
              this.authsInfo = res.data
              console.log(this.authsInfo)
          })
      },
      getAuthListFormRid: async function (roleId) {
          console.log("getAuthListFormRid" + roleId)
          // if (this.authMap.get(roleId) === undefined) {
          //     let auths = await this.getRoleAuths(roleId)
          //     console.log("auth:")
          //     console.log(auths)
          //     return auths
          // }
          // return this.authMap.get(roleId)
          return [1,2,3,4,5,6]
      },
      getRoleList: async function () {
         const token = $cookies.get('token')
         return new Promise((resolve, reject)=> {
             axios({
                 method: 'get',
                 url: '/role/list',
                 baseURL: this.myBaseURL,
                 headers: {
                     "Content-Type": "multipart/form-data",
                     "User-Token": token,
                 }
             }).then(res => {
                 //console.log(res.data)
                 this.roleList = res.data
                 resolve(res.data)
                 return res.data
             }).catch(err => {
                 reject(err)
             })
           }
         )
      },
      getRoleAuths: async function (roleId){
          const token = $cookies.get('token');
          return new Promise((resolve, reject)=>{
              axios({
                  method: 'get',
                  url: '/auth/get/list',
                  baseURL: this.myBaseURL,
                  params:{
                      roleId: roleId
                  },
                  headers: {
                      "Content-Type": "multipart/form-data",
                      "User-Token": token,
                  }
              }).then(res=>{
                  console.log(res.data)
                  this.authsInfo = res.data
                  resolve(res.data)
              }).catch(err=>{
                  reject(err)
              })
          })
      },
      getAuthName: async function (authId){
          // return await new Promise((resolve, reject) => {
          //     axios({
          //         method: 'get',
          //         url: '/auth/get/name',
          //         baseURL: this.myBaseURL,
          //         params: {
          //             authId: authId,
          //         }
          //     }).then(res => {
          //         resolve(res.data)
          //     }).catch(err => {
          //         reject(err)
          //     })
          // })
          for (const auth in this.authsInfo) {
              if(auth.id === authId)
                  return auth.name
          }
          return "NA"
      },

      updateConfirm:function () {
          let i = 1
          const token = $cookies.get('token');
          console.log(this.setRoleId)
          for (const k in this.updateForm) {
              //console.log(i)
              //console.log(this.updateForm[k])
              if(this.updateForm[k] === true){
                  axios({
                      method: 'get',
                      url: '/auth/add',
                      baseURL: this.myBaseURL,
                      params:{
                          roleId: this.setRoleId,
                          authId: i
                      },
                      headers: {
                          "Content-Type": "multipart/form-data",
                          "User-Token": token,
                      }
                  }).then(res=>{
                      console.log(res.data)
                  })
              }else {
                  axios({
                      method: 'get',
                      url: '/auth/del',
                      baseURL: this.myBaseURL,
                      params:{
                          roleId: this.setRoleId,
                          authId: i
                      },
                      headers: {
                          "Content-Type": "multipart/form-data",
                          "User-Token": token,
                      }
                  }).then(res=>{
                      console.log(res.data)
                  })
              }
              i = i + 1

          }
          this.$message.success('上传成功！');//alert("上传成功!")
          this.dialogFormVisible = false
      },
    },
    computed: {
        myMapAsList(rid) {
            let x = this.setMapResp;
            console.log(x,rid)
            // By using `mySetChangeTracker` we tell Vue that this property depends on it,
            // so it gets re-evaluated whenever `mySetChangeTracker` changes
            return Array.from([1,2,3,4]);
        },
    },
    async mounted() {
        this.authMap = new Map()
        this.getAuthsInfo()
        let roleIsList = await this.getRoleList()
        console.log(roleIsList)
        for (const roleId in roleIsList) {
            let auths = await this.getRoleAuths(roleId)
            let newMap = this.authMap.set(roleId,auths)
            this.authMap = new Map(newMap)
            this.setMapResp = this.setMapResp + 1
            //console.log(auths)
            //console.log(this.authMap)
        }
    },
    async created() {
    },
    async beforeCreate() {
    },
    watch:{
        data(){
        }
    }
})
</script>

<style scoped>

</style>